<template>
    <div class="resCommon">
        <div class="search">
            <div class="classify">
                <el-radio-group v-model="activeName" @change="toggle">
                    <el-radio-button label="public">公共</el-radio-button>
                    <el-radio-button label="tenant">私有</el-radio-button>
                    <el-radio-button label="share">共享</el-radio-button>
                </el-radio-group>
            </div>
            <div class="searchBox">
                <el-button class="addResBtn" :disabled="canShow" type="primary" @click="addResBtn">新建资源</el-button>
                <search placeholder="请输入搜索内容名称" :live-search="true" :search-word.sync="searchName" @search="searchCon"/>
            </div>
        </div>
        <!-- 目录面包屑 -->
        <el-breadcrumb separator="/" class="breadcrumb-wrap">
            <el-breadcrumb-item></el-breadcrumb-item>
            <el-breadcrumb-item
                v-for="(item, index) in breadcrumbList"
                :key="item.id"
                @click.native="onClickBread(item, index)"
            >
                <span class="cursor">{{item.name}}</span>
            </el-breadcrumb-item>
            <el-breadcrumb-item></el-breadcrumb-item>
        </el-breadcrumb>
        <div>
            <el-table :key='toggleIndex' v-loading="loading" :data="resourcePublic" stripe style="width: 100%">
                <el-table-column label="目录">
                    <template slot-scope="scope">
                        <el-button @click="menuDetail(scope.row)" type="text">{{urlHandle(scope.row.url)}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="容量配额">
                    <template slot-scope="scope">
                        <span>{{scope.row.capacity}} {{scope.row.unit==1?'MB':scope.row.unit==2?"GB":scope.row.unit==3?'TB':''}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="文件配额(个)">
                    <template slot-scope="scope">
                        <span>{{scope.row.fileNum}}</span>
                    </template>
                </el-table-column>
                <el-table-column v-if="activeName!='tenant'&&clickStep=='1'" label="包含权限">
                    <template slot-scope="scope">
                        <span>{{scope.row.powerList}}</span>
                    </template>
                </el-table-column>
                <el-table-column v-if="activeName=='share'&&clickStep=='2'" label="分享者">
                    <template slot-scope="scope">
                        <span>{{scope.row.creator}}</span>
                    </template>
                </el-table-column>
                <el-table-column v-if="clickStep!=1" label="修改日期">
                    <template slot-scope="scope">
                        <span>{{scope.row.updDate}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-tooltip content="分配用户" placement="top">
                            <el-button  v-if="clickStep!='1'" type="text" @click="tenantBtn(scope.row)">
                                <i class="el-icon-files icon-fs"></i>
                            </el-button>
                        </el-tooltip>
                        <el-tooltip content="分享租户" placement="top">
                            <el-button v-if="activeName=='tenant'&&clickStep=='2'" type="text" @click="shareBtn(scope.row)">
                                <i class="el-icon-share icon-fs"></i>
                            </el-button>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button v-if="activeName!='share'&&clickStep!='1'||activeName=='share'&&clickStep>'2'" type="text" @click="deleteBtn(scope.row)">
                                <i class="el-icon-delete icon-fs"></i>
                            </el-button>
                        </el-tooltip>
                        <el-tooltip content="详情" placement="top">
                            <el-button v-if="clickStep!=1" type="text" @click="resDetail(scope.row)">
                                <i class="el-icon-view icon-fs"></i>
                            </el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页(默认 10条/页) -->
        <pagenation :pageInfo='pageinfo'></pagenation>
        <dialogCom :diaData='dialogData'></dialogCom>
    </div>
</template>

<script>
import { managerApi } from '@/request'
import { mapState } from "vuex";
import Pagenation from '@/components/resource/Pagenation'
import DialogCom from '@/components/resource/TenantResource';
import resource from '@/mixins/resource'
import Search from '@/components/common/Search'

    export default {
        components:{ DialogCom, Pagenation, Search },
        mixins:[resource],
        data() {
            return {
                pageinfo: {
                    tenantNum: 0,
                    currentPage: 1
                },
                privateId:'',
                dialogData:{
                    type: 'HDFS',
                    label:'目录名',
                    addResourceTab: false,
                    titleTips: '',
                    opeBtn: '',
                    isDisabled: true,
                    operatorTips: '',
                    resOperate: false,
                    editData: {}
                },
                tenantDetail: false,
                formInline:{},
                isShare: '1',
                newResRules: {
                    name: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ]
                },
                isPowerDisabled: true,  //控制租户是否有新建资源的权限
                // clickStep: 1
            }
        },
        mounted(){
            // 获取列表
            this.getResourceList();
        },
        computed: {
            ...mapState(["loginerName"]),
            canShow(){
                const activeName = this.activeName;
                const clickStep = this.clickStep;
                return !(((activeName=='public'||activeName=='tenant')&&clickStep>1)||((activeName=='share')&&clickStep>2));
            }
        },
        methods:{
            // 切换公、私、共享
            toggle(){
                this.toggleIndex++;
                this.isPowerDisabled = true;
                let tab = this.activeName;
                if(tab == 'public'){
                    this.breadcrumbList =  [
                        {
                            name: 'public',
                            id: '0'
                        }
                    ]
                } else {
                    this.breadcrumbList =  [
                        {
                            name: 'dataspace',
                            id: '0'
                        }
                    ]
                } 
                this.clickStep = 1;
                // 更新分页
                this.pageIndex = 1;
                this.currentPage = 1;
                this.getResourceList();
            },
            // 新建资源
            addResBtn(){
                let url = '/'
                this.breadcrumbList.map(res=>{
                    url = url + res.name + '/';
                })
                let parentId = this.breadcrumbList;
                this.dialogData.editData = {
                    allUrl: url,
                    resourceId: parentId[parentId.length-1].id=='0'?this.privateId:parentId[parentId.length-1].id
                };
                // resType 为1时指公共；2为私有；3为共享
                if(this.activeName=='tenant'){
                    this.dialogData.titleTips = '新建资源';
                    this.dialogData.resType = '2';
                    // this.dialogData.editData.resourceId = this.resourceId;
                } else if(this.activeName=='public'){
                    this.dialogData.titleTips = '新建公共资源';
                    this.dialogData.resType = '1';
                } else {
                    this.dialogData.titleTips = '新建资源';
                    this.dialogData.resType = '3';
                }
                this.dialogData.resDetail = false;
                this.dialogData.addResourceTab = true;
                this.dialogData.isDisabled = false;
                this.dialogData.parentId = parentId[parentId.length-1].id;
            },
        }
    }
</script>

<style lang="scss" scoped>
@import '~@/styles/resCommon.scss';
</style>